<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 16:49:08
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:07:33
-->
<template>
  <div class="applyQuery">
    <div class="wrapper">
      <!-- 手机号查询信息开始 -->
      <div class="telQuery">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="手机号">
            <el-input
              v-model="formInline.telephone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="telQuery()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 手机号查询信息结束 -->
      <!-- 跳转至报名页开始 -->
      <div class="toApply" v-if="flag" >
        暂无报名信息, &nbsp;&nbsp;<span class="toApplyLink" @click="toApply()">去报名</span>
      </div>
      <!-- 跳转至报名页结束 -->
      <!-- 生成查询结果开始 -->
      <div class="queryData" v-else>
        <div class="title" >报名的游学项目</div>
        <div
          class="project"
          v-for="item in queryData"
          :key="item.id"
          @click="projectDetail(item.id)"
        >
          <div class="left">
            <img style="width: 100%" :src="item.project.figure" alt="" />
          </div>
          <div class="right">
            <div class="name">
              {{ item.project.name }}
            </div>
            <div class="time">
              <span>时间：</span> {{ item.project.beginTime | fmtDate }}~{{
                item.project.endTime | fmtDate
              }}
            </div>
            <div class="pay"><span>费用：元</span></div>
            <div class="applyTime">
              <span>报名时间：</span> {{ item.insertTime | fmtDate }}
            </div>
            <div class="applyStatus">
              <span>报名状态：</span>
              <el-tag v-if="item.status=='未确认'" size="mini" type="danger">{{item.status}}</el-tag>
              <el-tag v-else size="mini" type="success">{{item.status}}</el-tag>
            </div>
            <div class="content">
              <span>简介：</span>
              {{item.project.introduce}}
            </div>
          </div>
        </div>
      </div>
      <!-- 生成查询结果结束 -->
    </div>
  </div>
</template>

<script>
import { get } from "../utils/request";
export default {
  data() {
    return {
      formInline: {},
      queryData: [],
      flag:true,
      id:this.$route.query.id
    };
  },
  methods: {
    // 提交手机号进行查询
    async telQuery() {
      await get("/index/apply/query", this.formInline).then((res) => {
        // console.log(res);
        if(res.status===200){
          this.queryData = res.data;
          if(this.queryData==''){
            this.flag = true
          }else{
            this.flag =false
          }
          console.log(this.queryData);
          // console.log(this.flag);
        }else{
          this.$message({
            type:'error',
            message:res.message
          })
        }
      });
    },
    // 跳转至报名页
    toApply(){
      this.$router.push({
        path:'/apply',
        query:{
          id:this.id
        }
      })
    }
  },
  created() {
    // this.telQuery()
    this.flag =true
  },
};
</script>

<style lang="scss" scoped>
.applyQuery {
  .wrapper {
    width: 1240px;
    // height: 90vh;
    // height: 70vh;
    .telQuery {
      padding: 2em 0;
      width: 500px;
      margin: 0 auto;
    }
    .toApply{
      width: 300px;
      margin: 0 auto;
      // text-align: center;
      padding-bottom: 2em;
      .toApplyLink{
        cursor: pointer;
        color: #0189EC;
      }
    }
    .title {
      font-size: 20px;
      line-height: 4em;
      border-bottom: 1px solid #f4f4f4;
    }
    .project {
      display: flex;
      padding: 1em 0;
      border-bottom: 1px solid #f4f4f4;
      cursor: pointer;
      .left {
        width: 300px;
        height: 200px;
        background-color: #f4f4f4;
        border-radius: 5px;
        overflow: hidden;
      }
      .right {
        flex: 1;
        // background-color: seagreen;
        padding: 0 2em;
        .name {
          font-size: 15px;
          font-weight: 700;
        }
        .time {
          margin: 0.5em 0;
          span{
            font-weight: 700;
          }
        }
        .pay{
          margin: 0.5em 0;
          span{
            font-weight: 700;
          }
        }
        .applyTime{
           margin: 0.5em 0;
          span{
            font-weight: 700;
          }
        }
        .applyStatus{
           margin: 0.5em 0;
          span{
            font-weight: 700;
          }
        }
        .content {
          line-height: 2em;
          margin: 0.5em 0;
          span{
            font-weight: 700;
          }
        }
      }
    }
  }
}
</style>